import { ProFormSelect } from '@ant-design/pro-components';
import {
  DrawerForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React, { useMemo } from 'react';
import * as c from '@/services/consts';
import { Col, Row } from 'antd';

type FormProps = {
  open: boolean;
  current: API.CdnAccount | undefined;
  onCancel: () => void;
  onSubmit: (values: API.CdnAccount) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, current, onCancel, onSubmit } = props;
  if (!open) {
    return null;
  }



  return (
    <DrawerForm<API.CdnAccount>
      open={open}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}CDN帐号管理`}
      width={900}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <Row gutter={24}>
        <Col span={12}>
          <ProFormSelect
            name="type"
            label="类型"
            placeholder="请选择类型"
            allowClear={false}
            rules={[{ required: true, message: '请选择类型' }]}
            options={c.CdnSupplierTypeOptions}
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name="area"
            label="注册区域"
          />
        </Col>
      </Row>
      
      <ProFormText
        name="name"
        label="帐号"
        rules={[{ required: true, message: '请输入帐号' }]}
        placeholder="请输入帐号"
      />
      <ProFormText
        name="authToken"
        label="Token"
        placeholder="请输入Token"
      />
      <ProFormText
        name="proxy"
        label="访问代理 (http / https)"
        placeholder="访问代理"
      />
      <ProFormText
        name="authAccountId"
        label="Account ID"
        placeholder="请输入Account ID"
      />
      <ProFormTextArea name="remark" label="备注" />
    </DrawerForm>
  );
};

export default Form;
